<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>新闻列表</title>
	<link type="text/css" rel="stylesheet" href="./reset.css">
</head>
<body>
	<div class="header">
		<ul class="header-content">
			<li class="header-item">Top</li>
			<li class="header-item">News</li>
			<li class="header-item">Video</li>
			<li class="header-item">Story</li>
			<li class="header-item">Pics</li>
			<li class="header-item">Live</li>
		</ul>
	</div>
	<div class="banner-content">
		<img src="./images/top.jpeg" alt="" class="banner">
		<p class="banner-title">New Trip by the River</p>
	</div>
	<div class="news-content">
		<ul>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/1.jpeg" alt="1.jpeg" class="news-img">
					<p class="news-title">Amanohashidate (天橋立) is one of Japan's three scenic views. </p>
					<span class="time">1 hour ago</span>
					<span class="num">99</span>
				</div>
			</li>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/2.jpeg" alt="2.jpeg" class="news-img">
					<p class="news-title">Zenkō-ji (善光寺) is a Buddhist temple located in Nagano, Japan.  </p>
					<span class="time">2 hours ago</span>
					<span class="num">129</span>
				</div>
			</li>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/3.jpeg" alt="3.jpeg" class="news-img">
					<p class="news-title">The hot springs can cure all forms of ailments except love sickness.</p>
					<span class="time">3 hours ago</span>
					<span class="num">264</span>
				</div>
			</li>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/4.jpeg" alt="4.jpeg" class="news-img">
					<p class="news-title">Beach is always a good chioce</p>
					<span class="time">4 hours ago</span>
					<span class="num">231</span>
				</div>
			</li>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/5.jpeg" alt="5.jpeg" class="news-img">
					<p class="news-title">With the help from owls, you can go anywhere</p>
					<span class="time">4 hours ago</span>
					<span class="num">199</span>
				</div>
			</li>
			<li class="news-item">
				<div class="item-inner">
					<img src="images/6.jpeg" alt="6.jpeg" class="news-img">
					<p class="news-title">Get lost? Don't worry.</p>
					<span class="time">5 hours ago</span>
					<span class="num">237</span>
				</div>
			</li>
		</ul>
	</div>

	<script type="text/javascript" src="./build/bundle.js"></script>
</body>
</html>
